<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>我的消息</title>
    <link th:href="@{/img/Fan_logo_alpha.png}" rel="icon" type="image/x-icon">
    <!-- 自定义字体 -->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- 表格消息的主要css -->
    <link th:href="@{/css/sb-admin-2.css}" rel="stylesheet">

    <!-- 表格bootstrap -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">
    <style>
        /*去除a标签的所有效果*/
        /*包含以下四种的链接*/
        a {
            text-decoration: none;
        }
        /*正常的未被访问过的链接*/
        a:link {
            text-decoration: none;
        }
        /*已经访问过的链接*/
        a:visited {
            text-decoration: none;
        }
        /*鼠标划过(停留)的链接*/
        a:hover {
            text-decoration: none;
        }
        /* 正在点击的链接*/
        a:active {
            text-decoration: none;
        }
    </style>
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
        img{
            display: inline-block;
            height: auto;
            max-width: 100%;
        }
        /*响应String中的回车符*/
        #blogContent{
            white-space: pre-line;
        }
        #blogContent iframe{
            display: inline-block;
            height: 720px;
            max-width: 100%;
            width: 1080px;
        }
        #comment{
            white-space: pre-line;
        }
        #comment img{
            display: inline-block;
            height: auto;
            max-width: 20%;
        }
        .w-e-toolbar{
            flex-wrap:wrap;
        }
    </style>
</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">
        <!-- 侧边栏 -->
        <div id="profileSideBar"
             th:replace="/common/module.html::sideBar(active='myInfo')"></div>
        <!-- 侧边栏到此为止啦 -->



        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- 除去侧边栏后剩余的主体部分 -->
            <div id="content">

                <!-- 顶部头条内容 -->
                <div th:replace="/common/module.html::navBar"></div>
                <!-- 顶栏到此为止 -->

                <!-- 主体部分 -->
                <div class="container-fluid">
                    <div class="card-header text-nowrap" style="margin-left: -20px;">
                        <button class="btn btn-primary" id="showNewestPostBtn" onclick="">查看全部未读</button>
                        <button class="btn btn-secondary" id="showHottestPostBtn" onclick="">全部设为已读</button>
                    </div>

                    <div class="row">
                        <div class="col-lg-9 mt-2">
                            <!--统计卡片-->
                            <div class="table-responsive">
                                <table class="table table-bordered no-footer dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
                                    <thead>
                                        <tr role="row">
                                            <th class="sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" style="width: 866px;" aria-label="帖子内容切换为倒序排列: 升序排序">
                                                消息列表
                                                <small class="float-right btn btn-sm btn-outline-secondary" style="cursor: pointer;">
                                                    切换为倒序排列
                                                </small>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="listcontent">
                                        <tr th:each="item:${infoList}" role="row">
                                            <td th:id="'info'+${item.getId()}" class="overflow-hidden">
                                                <div class="card one-article mb-2">
                                                    <div class="card-header text-primary w-100">
                                                        <a href="#" class="nav-link">
                                                            <span th:text="${item.title}" class="badge badge-pill badge-info mr-2">消息标题</span>
                                                            <span class="fa fa-info-circle mr-1"></span>
                                                            <span th:text="${item.content}" >消息内容</span>
                                                            <button th:href="'/system/information/read?id='+${item.getId()}"
                                                                    th:name="${item.getId()}"
                                                                    class="ml-2 float-right btn btn-sm btn-outline-info"
                                                                    onclick="haveReadThisInfo(this,this.name);">
                                                                已读
                                                            </button>
                                                            <span class="float-right text-secondary" th:text="${#dates.format(item.createDate, 'yyyy-MM-dd HH:mm:ss')}">消息时间</span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!--一个统计区块-->
                        </div>
                        <div class="col-lg-3 animated--grow-in" id="postTagsArea">
                            <div class="col text-nowrap mt-2">
                                <!-- 这是一个右侧导航的区块-->
                                <div class="shadow">
                                    <div class="card-header border-bottom-info bg-white">
                                        <i class="fas fa-list-ul"></i>
                                        <small class="h5"> 消息数量统计</small>
                                        <!--                                    <a class="btn btn-sm btn-outline-info float-right" href="#"> 更多>> </a>-->
                                    </div>
                                    <div class="card">
                                        <div class="card-body">
                                            <table class="shadow-sm table">
                                                <thead>
                                                <tr></tr>
                                                </thead>
                                                <tbody id="postingmessage1">
                                                <tr><td><button class="btn btn-outline-light w-100 text-primary" onclick=""><i class="fas fa-tag"></i>评论通知<a style="opacity: 80%;" class="btn btn-sm btn-success btn-arrow-left float-right ml-3" href="#" id="postingclassnum0" th:text="${count[0]}">0</a></button></td></tr>
                                                <tr><td><button class="btn btn-outline-light w-100 text-primary" onclick=""><i class="fas fa-tag"></i>审核消息<a style="opacity: 80%;" class="btn btn-sm btn-success btn-arrow-left float-right ml-3" href="#" id="postingclassnum1" th:text="${count[1]}">0</a></button></td></tr>
                                                <tr><td><button class="btn btn-outline-light w-100 text-primary" onclick=""><i class="fas fa-tag"></i>投稿通知<a style="opacity: 80%;" class="btn btn-sm btn-success btn-arrow-left float-right ml-3" href="#" id="postingclassnum2" th:text="${count[2]}">0</a></button></td></tr>
                                                <tr><td><button class="btn btn-outline-light w-100 text-primary" onclick=""><i class="fas fa-tag"></i>稿费通知<a style="opacity: 80%;" class="btn btn-sm btn-success btn-arrow-left float-right ml-3" href="#" id="postingclassnum3" th:text="${count[3]}">0</a></button></td></tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!--  一个右侧导航区快结束-->
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- 主体内容结束 -->

            <!-- 页脚 -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; Manage Website 2022</span>
                    </div>
                </div>
            </footer>
            <!-- 页脚-->

        </div>
        <!-- 网页消息结束 -->

    </div>
    <!-- 主体可视消息结束，接下来时其他按钮或者弹窗 -->

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- 弹窗 -->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">注意</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">确定要退出登录吗?</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-primary" href="/logout">确定</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/ContentFiltering.js}"></script>
    <!-- Core plugin JavaScript-->
    <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

    <!-- Custom scripts for all pages-->
    <script th:src="@{/js/sb-admin-2.js}"></script>

    <!-- Page level plugins -->
    <script th:src="@{/vendor/datatables/jquery.dataTables.min.js}"></script>
    <script th:src="@{/vendor/datatables/dataTables.bootstrap4.min.js}"></script>

    <!-- Page level custom scripts -->
    <script th:src="@{/js/demo/datatables-demo.js}"></script>
    <script th:src="@{/js/getInformation.js}"></script>
    <script>
        function haveReadThisInfo(btn,id){
            //这行代码是更改按钮颜色到灰色的代码
            $(btn).removeClass("btn-outline-info").addClass("btn-outline-secondary");
            let href = $(btn).attr("href");
            console.log(href);  //在这里可以观察到每个已读按钮的传参地址，可以使用ajax去ping后台
            $.get(href, function (data) {
                // data是获取到的信息
                let msg = data.msg;
                console.log(msg);
                if(msg==="已读成功"){   //后台成功返回时应该会隐藏这个消息td
                    $("#info"+id).addClass("d-none");
                }
            });
            //对了，别忘了测试完毕后，注释掉上面的打印输出函数
        }
    </script>
</body>

</html>